<template>
  <div class="card">
    <div class="card-header">
      <button id="addAdminBtn" type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#modal-default">添加管理员</button>
    </div>
    <!-- /.card-header -->
    <div class="card-body" id="adminTable">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th style="width: 10px">#</th>
            <th>adminName</th>
            <th>regTime</th>
            <th style="width: 40px">isOnline</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(admin, index) in adminList" :key="index">
            <td>{{ index }}</td>
            <td>{{ admin.adminName }}</td>
            <td>
              <div class="progress progress-xs">
                <div class="progress-bar progress-bar-danger" style="width: 55%">{{ admin.regTime }}</div>
              </div>
            </td>
            <td><span class="badge bg-danger" @click="deleteAdmin(admin)">点击删除</span></td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
  <div class="modal fade show" id="modal-default" style="display: none; padding-right: 17px;" aria-modal="true"
    role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">添加管理员</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form name="adminForm" ref="from">
            <div class="form-group">
              <label for="adminName">管理员账号</label>
              <input name="adminName" type="text" class="form-control" id="adminName" placeholder="请输入管理员账号"
                v-model="adminName">
            </div>
            <div class="form-group">
              <label for="passWord">管理员密码</label>
              <input name="passWord" type="password" class="form-control" id="passWord" placeholder="请输入管理员密码"
                v-model="passWord">
            </div>
            <div class="form-group">
              <label for="rePassWord">重复密码</label>
              <input name="rePassWord" type="password" class="form-control" id="rePpassWord" placeholder="请再次输入管理密码"
                v-model="repassWord">
            </div>
          </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" id="closeAdminBtn" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="saveAdminBtn" @click="addAdmin">保存</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

</template>

<script>
//引入请求方法
import { requestLoginAdmin } from '../../../API/send'
import { mapState } from 'vuex'
export default {
  name: 'AdminList',
  data() {
    return {
      adminName: '',
      passWord: '',
      repassWord: '',
    }
  },
  computed: {
    ...mapState({
      adminList: (state) => {
        return state.AdminList.adminList
      }
    })
  },
  methods: {
    async addAdmin() {
      //表单验证
      let adminValue = this.adminName
      let passwordValue = this.passWord
      let rePasswordValue = this.repassWord

      if (!adminValue || !passwordValue || !rePasswordValue) {
        return alert('账号密码不能为空')
      }

      if (passwordValue !== rePasswordValue) {
        return alert('两次密码必须相同')
      }
      const user = {
        adminName: adminValue.trim(),
        passWord: passwordValue.trim(),
        regTime: new Date().toLocaleString()
      }

      //发送请求
      try {
        let result = await requestLoginAdmin(user)
        alert(result.message)
        //添加成功后重新跳转路游

      } catch (error) {
        alert(error)
      }

    },
    //删除管理员
    async deleteAdmin(admin) {
      // console.log(admin.adminName);
      try {
        await this.$store.dispatch('requestDeletAdmin', admin.adminName)
        //删除成功后重新请求渲染数据
        this.$store.dispatch('requestAdminList')
      } catch (error) {
        console.log(error);
      }
    }
  },
  mounted() {
    //请求管理员列表
    this.$store.dispatch('requestAdminList')
  },
}
</script>

<style lang="scss" scoped>
</style>